<template lang="html">
  <div id="myEchart" :style="{'width':'600px','height':'600px'}">

  </div>
</template>

<script>
export default {
  name:"echartDemo",
  data(){
    return {

    }
  },
  mounted(){
    this.drawLine();
  },
  methods: {
    drawLine(){
        // 基于准备好的dom，初始化echarts实例
        let myChart = this.$echarts.init(document.getElementById('myEchart'))
        // 绘制图表
        var app = {};
  var option = null;
  var xAxisData = [];
  var data1 = [];
  var data2 = [];
  for (var i = 0; i < 100; i++) {
      xAxisData.push('类目' + i);
      data1.push((Math.sin(i / 5) * (i / 5 -10) + i / 6) * 5);
      data2.push((Math.cos(i / 5) * (i / 5 -10) + i / 6) * 5);
  }

  myChart.setOption({
      title: {
          text: '柱状图动画延迟'
      },
      legend: {
          data: ['bar', 'bar2'],
          align: 'left'
      },
      toolbox: {
          // y: 'bottom',
          feature: {
              magicType: {
                  type: ['stack', 'tiled']
              },
              dataView: {},
              saveAsImage: {
                  pixelRatio: 2
              }
          }
      },
      tooltip: {},
      xAxis: {
          data: xAxisData,
          silent: false,
          splitLine: {
              show: false
          }
      },
      yAxis: {
      },
      series: [{
          name: 'bar',
          type: 'bar',
          data: data1,
          animationDelay: function (idx) {
              return idx * 10;
          }
      }, {
          name: 'bar2',
          type: 'bar',
          data: data2,
          animationDelay: function (idx) {
              return idx * 10 + 100;
          }
      }],
      animationEasing: 'elasticOut',
      animationDelayUpdate: function (idx) {
          return idx * 5;
      }
  });;

    }
  }
}
</script>

<style lang="css">
</style>
